<template>
	<div id="new">
		<div id="new-first" :style="{backgroundImage:url}">
			<img :src='this.$store.state.url + "/img/lfximg/19.png"'>
			<img :src='this.$store.state.url + "/img/lfximg/20.png"'>
		</div>
		<div id="new-second" :style="{backgroundImage:url1}">
			<img class="new-img1" :src='this.$store.state.url + "/img/lfximg/21.png"'>
			<div id="new-second-son1">
				<div id="new-second-box1">
					<img :src='this.$store.state.url + "/img/lfximg/22.png"'>
					<h2>
						蓝莓轻乳拿破仑
					</h2>
					<div class="disco">
						折扣价￥<i>{{fn}}</i><span>
							原价￥198
						</span>
					</div>
					<div class="buy">
						<span class="buy-first" :style="{backgroundImage:url2}">
							立即购买
						</span>
						<div id="buy-second" :style="{backgroundImage:url2}">
							<span @click="reduce">
								-
							</span>
							<span>
								{{fn1}}
							</span>
							<span @click="decorate">
								+
							</span>
						</div>
					</div>
				</div>

				<div id="new-second-box2">
					<img :src='this.$store.state.url + "/img/lfximg/23.png"'>
					<h2>
						甜愿.生日蛋糕
					</h2>
					<div class="disco">
						折扣价￥<i>{{fn2}}</i><span>
							原价￥298
						</span>
					</div>
					<div class="buy">
						<span class="buy-first" :style="{backgroundImage:url2}">
							立即购买
						</span>
						<div id="buy-second" :style="{backgroundImage:url2}">
							<span @click="reduce1">
								-
							</span>
							<span>
								{{fn3}}
							</span>
							<span @click="decorate1">
								+
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="new-trans" :style="{backgroundImage:url3}">
			<div id="new-trans-img1">
				<transition name="fade">
					<img v-if="flag" :src='this.$store.state.url + "/img/lfximg/28.png"'>
				</transition>
			</div>
			<div id="new-trans-img2">
				<transition name="fade">
					<img v-if="flag1" :src='this.$store.state.url + "/img/lfximg/27.png"'>
				</transition>
			</div>
		</div>
		
		
		<div id="new-world" :style="{backgroundImage:url4}">
			<div id="new-world-img1">
				<transition name="fade">
					<img v-if="flag2" :src='this.$store.state.url + "/img/lfximg/30.png"'>
				</transition>
			</div>
			<div id="new-world-img2">
				<transition name="fade">
					<img v-if="flag3" :src='this.$store.state.url + "/img/lfximg/31.png"'>
				</transition>
			</div>
			<div class="evt-rules">
				<h2>活动规则:</h2>
				<p>1、活动时间：2021年1月1日-2021年12月31日</p>
				<p>2、活动城市：上海、苏州、杭州 、北京</p>
				<p>3、支付方式：微信、支付宝，本活动仅限使用微信、支付宝全额支付的用户参与</p>
				<p>4、活动内容：</p>
				<div class="p">
					<p>a、在活动页面注册后即可领取185元新人优惠券礼包，仅限新用户参与，每位新用户仅限领取一次，优惠券有效期：自领取之日内180天内有效，不与其他优惠同享</p>
					<p>b、活动页面订购蓝莓轻乳拿破仑、甜愿·生日蛋糕、香溢新芝、爱丽丝花境首单用户享75折优惠</p>
					<p>c、凡新用户首单配送完成后，账户内即赠免费升磅券1张，仅限蛋糕1磅升至2磅（升磅券有效期为自发放之日180天内有效）；小食兑换券1张（价值48元），需单笔订单金额满100元，方可使用此券（兑换券有效期为自发放之日60天内有效）
					</p>
					<p>d、凡新用户第2笔订单配送完成后，账户内即赠会员福利券1张（价值10元），可在每周二会员日等活动中使用（福利券有效期为自发放之日60天内有效）</p>
				</div>
				<p>5、本活动与会员等级制度、积分同享，但不与其他优惠同享</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				url1: "",
				url2: "",
				url3: "",
				url4:"",
				money: 148.5,
				money1: 223.5,
				mass: "",
				mass1: "",
				num: 1,
				num2: 1,
				num1: 454,
				num3: 772,
				flag: false,
				flag1: "",
				flag2:"",
				flag3:""
			}

		},
		mounted() {
			this.url = `url(${this.$store.state.url + "/img/lfximg/bj3.png"})`
			this.url1 = `url(${this.$store.state.url + "/img/lfximg/bj4.png"})`
			this.url2 = `url(${this.$store.state.url + "/img/lfximg/24.png"})`
			this.url3 = `url(${this.$store.state.url + "/img/lfximg/29.png"})`
			this.mass = `${this.num}磅(${this.num1}g)`
			this.url4 = `url(${this.$store.state.url + "/img/lfximg/bj5.png"})`
			window.addEventListener("scroll", this.cli)
		},
		methods: {
			cli() {
				let res = document.documentElement.scrollTop || document.body.scrollTop
				console.log(res)
				if (res >= 1400) {
					this.flag = true
				}
				if (res >= 1800) {
					this.flag1 = true
				}
				if (res >= 2024) {
					this.flag2 = true
				}
				if (res >= 2500) {
					this.flag3 = true
				}

			},
			reduce() {
				if (this.num == 1) {
					this.num = 1
					this.num1 = this.num * 454
				} else {
					this.num = this.num + 1
					this.num1 = this.num * 454
				}
			},
			decorate() {
				if (this.num == 4) {
					alert("省者点")
				} else {
					this.num = this.num + 1
					this.num1 = this.num * 454
				}

			},

			reduce1() {
				if (this.num2 == 1) {
					this.num2 = 1
					this.num3 = this.num2 * 772
				} else {
					this.num2 = this.num2 - 1;
					this.num3 = this.num2 * 772
				}
			},
			decorate1() {
				if (this.nun2 == 4) {
					alert("省着点")
				} else {
					this.num2 = this.num2 + 1
					this.num3 = this.num2 * 772
				}

			}
		},

		computed: {
			fn() {
				return this.money * this.num
			},
			fn1() {
				this.mass = `${this.num}磅(${this.num1}g)`
				return this.mass
			},
			fn2() {
				return this.money1 * this.num2
			},
			fn3() {
				this.mass1 = `${this.num2}磅(${this.num3}g)`
				return this.mass1
			}

		},

	}
</script>

<style scoped="scoped" lang="scss">
	#new-first {
		width: 100%;
		margin-top: 120px;
		padding: 20px;

		img {
			display: block;
			margin: 0 auto;
		}
	}

	#new-second {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.new-img1 {
			display: block;
			width: 947px;
			height: 92px;
		}

		#new-second-son1 {
			width: 947px;
			margin: 60px auto;
			display: flex;

			#new-second-box1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20px 40px 0;

				h2 {
					font-weight: 400;
					margin-top: 40px;
				}

				.disco {
					font-size: 20px;
					padding: 20px;

					i {
						font-size: 30px;
						font-style: normal;
						color: red;
					}

					span {
						padding: 10px;
						text-decoration: line-through;
					}
				}

				.buy {
					color: white;
					font-size: 17px;
					display: flex;

					.buy-first {
						width: 160px;
						height: 40px;
						margin-right: 100px;
						border-radius: 18px;
						line-height: 40px;
						text-align: center;
						background-position: center;
						cursor: pointer;
					}

					#buy-second {
						width: 160px;
						height: 40px;
						border-radius: 18px;
						line-height: 40px;
						text-align: center;
						background-position: center;
						cursor: pointer;

						span {
							font-size: 18px;

						}
					}
				}
			}

			#new-second-box2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20px 40px 0;

				h2 {
					font-weight: 400;
					margin-top: 40px;
				}

				.disco {
					font-size: 20px;
					padding: 20px;

					i {
						font-size: 30px;
						font-style: normal;
						color: red;
					}

					span {
						padding: 10px;
						text-decoration: line-through;
					}
				}

				.buy {
					color: white;
					font-size: 17px;
					display: flex;

					.buy-first {
						width: 160px;
						height: 40px;
						margin-right: 100px;
						border-radius: 18px;
						line-height: 40px;
						text-align: center;
						background-position: center;
						cursor: pointer;
					}

					#buy-second {
						width: 160px;
						height: 40px;
						border-radius: 18px;
						line-height: 40px;
						text-align: center;
						background-position: center;
						cursor: pointer;

						span {
							font-size: 18px;

						}
					}
				}
			}
		}
	}

	.fade-enter,
	.fade-leave {
		opacity: 0;
		margin-left: -200px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 2s ease-in-out;
	}

	#new-trans {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		#new-trans-img1 {
			width: 947px;
			height: 248px;
			padding-bottom: 40px;
		}

		#new-trans-img2 {
			width: 1000px;
			height: 410px;

		}
	}
	#new-world {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		#new-world-img1 {
			width: 947px;
			height: 248px;
			padding-bottom: 40px;
		}
		#new-world-img2 {
			width: 1000px;
			height: 410px;
	
		}
	}
	 .evt-rules{
		 width: 947px;
           padding: 20px;
		   font-size: 20px;
		   color:#D37272;
		   h2{
			   font-weight: 400;
		   }
	 }
</style>
